<template>
  <div class="home">
    <!-- 头部行业动态 -->
    <div class="homeTop" v-loading="loading">
      <!-- 图片轮播 -->
      <div class="swiper">
        <div class="bannerImg">
          <transition-group name="fade" tag="ul" class="slideUl">
            <li v-for="(list, index) in slideList" :key="index" @mouseenter="stop" @mouseleave="go"
              :style="{ display: currentIndex == index ? 'block' : 'none' }">
              <img @click="detail(list)" :src="list.customInfoType2" alt="">
            </li>
          </transition-group>
          <!--切换小按钮-->
          <div class="bannerItems">
            <p :title="titleName ? titleName.title : ''" @click="detail(titleName)" style=" cursor: pointer;">{{
              titleName ?
                titleName.title : "" }}</p>
            <div style="display:flex;padding-right: 10px;">
              <span v-for="(item, index) in total" :class="{ 'active': index === currentIndex }" :key="item"
                @click="change(index)">{{ index + 1 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 行业公告 -->
      <div class="announce">
        <div class="announceContent" v-for="(item, i) in listTop" :key="i">
          <div class="announceTop">
            <div class="titleTop">
              {{ item.name }}
            </div>
            <p @click="goto(item.name, item.tabId)">更多 ></p>
          </div>
          <ul>
            <li v-for="(ite, index) in item.list" :key='index'>
              <p :title="ite.title" @click="detail(ite)">{{ ite.title }}</p>
              <span style="font-size: 12px;">{{ ite.createTime ? ite.createTime.substring(0, 10) : "" }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 动图 -->
    <div class="imgGif">
      <img src="../assets/u80.png" alt="">
    </div>
    <!-- 应急 -->
    <div class="tabulation" v-loading="tabulationLoading">
      <div class="announceContent" v-for="(item, i) in tabulationList" :key="i">
        <div class="announceTop">
          <div class="titleTop">
            {{ item.name }}
          </div>
          <p @click="goto('业务动态', item.tabId)">更多 ></p>
        </div>
        <ul>
          <li v-for="(ite, index) in item.list" :key='index'>
            <p :title="ite.title" @click="detail(ite)">{{ ite.title }}</p>
            <span style="font-size: 12px;">{{ ite.createTime ? ite.createTime.substring(0, 10) : "" }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 淡入淡出 -->
    <div class="imagGif">
      <transition name="fades" v-for="(item, index) in imgurl" :key="index">
        <img :src="item.url" class="fadeIn" v-if="index == imgIndex" />
      </transition>
    </div>
    <!-- 捐赠 -->
    <div class="help" v-loading="helpLoading">
      <!-- 捐赠账户 -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            捐赠账户
          </div>
        </div>
        <div style="display:flex;justify-content: space-between;width:100%;padding-top: 20px;">
          <div style="padding-left:20px;width:55%">
            <div class="account">
              公益募捐账户
            </div>
            <div class="accountUse">
              <p>户名：铁岭市红十字会</p>
              <p>账户：21050138000800001252</p>
              <p>开户行：铁岭银行</p>
            </div>
          </div>
          <div style="text-align: center;display: flex;flex-direction: column;align-items: center;;width:37.5%">
            <div class="online">
              在线捐赠
            </div>
            <img src="../assets/u999.jpg" alt="" style="width:100%;height:149px">
          </div>
        </div>
      </div>
      <!-- 捐赠项目 -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            捐赠项目
          </div>
          <p @click="goto('捐赠项目', 2)">更多 ></p>
        </div>
        <div class="helpProject">
          <div class="helpProjects" v-for="(item, i) in helpData" :key="i">
            <img src="../assets/u77.png" alt="">
            <span @click="detail(item)">{{ item.title }}</span>
          </div>
        </div>
      </div>
      <!-- 我要求助 -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            我要求助
          </div>
          <p @click="goto('我要参与', 1)">更多 ></p>
        </div>
        <ul>
          <li v-for="(item, i) in helpList" :key="i">
            <p :title="item.title" @click="detail(item)">{{ item.title }}</p>
            <span style="font-size: 12px;">{{ item.createTime ? item.createTime.substring(0, 10) : "" }}</span>
          </li>
        </ul>
      </div>
      <!-- 红十字志愿服务与青少年工作 -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop" style="width:50%">
            红十字志愿服务与青少年工作
          </div>
          <p @click="goto('业务动态', 7)">更多 ></p>
        </div>
        <ul>
          <li v-for="(item, i) in list" :key="i">
            <p :title="item.title" @click="detail(item)">{{ item.title }}</p>
            <span style="font-size: 12px;">{{ item.createTime ? item.createTime.substring(0, 10) : "" }}</span>
          </li>
        </ul>
      </div>
      <!-- 红十字会会员/志愿者 -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            红十字会会员/志愿者
          </div>
          <p @click="goto('我要参与', 2)">更多 ></p>
        </div>
        <ul>
          <li v-for="(item, i) in volunteerList" :key="i">
            <p :title="item.title" @click="detail(item)">{{ item.title }}</p>
            <span style="font-size: 12px;">{{ item.createTime ? item.createTime.substring(0, 10) : "" }}</span>
          </li>
        </ul>
      </div>
      <!-- 爱心捐赠（资金） -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            爱心捐赠（资金）
          </div>
          <p @click="goto('信息公开', 6)">更多 ></p>
        </div>
        <div class="warp-title">
          <div class="item">
            <span class="title">捐赠日期</span>
            <span class="date">捐赠人</span>
            <span class="date">捐赠金额</span>
            <span class="date">捐赠项目</span>
          </div>
        </div>
        <div class="warp-content">
          <vue3-seamless-scroll :list="listData" class="scroll" :hover="true" :step="0.4" :limit-scroll-num="5">
            <div class="item" v-for="(item, index) in listData" :key="index">
              <span :title="item.donateDate ? item.donateDate.substring(0, 10) : ''"> {{ item.donateDate ?
                item.donateDate.substring(0, 10) : "" }}</span>
              <span :title="item.donateUser">{{ item.donateUser }}</span>
              <span :title="item.amount">{{ item.amount }}</span>
              <span :title="item.project">{{ item.project }}</span>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
      <!-- 捐赠支出（资金） -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            捐赠支出（资金）
          </div>
          <p @click="goto('信息公开', 6)">更多 ></p>
        </div>
        <div class="warp-title">
          <div class="item">
            <span class="title">支出日期</span>
            <span class="date">支出金额</span>
            <span class="date">支出项目</span>
            <span class="date">接收方</span>
          </div>
        </div>
        <div class="warp-content">
          <vue3-seamless-scroll :list="listData2" class="scroll" :hover="true" :step="0.4" :limit-scroll-num="5">
            <div class="item" v-for="(item, index) in listData2" :key="index">
              <span :title="item.donateOutlayDate ? item.donateOutlayDate.substring(0, 10) : ''"> {{
                item.donateOutlayDate ? item.donateOutlayDate.substring(0, 10) : "" }}</span>
              <span :title="item.amount">{{ item.amount }}</span>
              <span :title="item.project">{{ item.project }}</span>
              <span :title="item.donateOutlayUser">{{ item.donateOutlayUser }}</span>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
      <!-- 爱心捐赠（物资） -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            爱心捐赠（物资）
          </div>
          <p @click="goto('信息公开', 6)">更多 ></p>
        </div>
        <div class="warp-title">
          <div class="item">
            <span class="title">捐赠日期 </span>
            <span class="date">捐赠人</span>
            <span class="date">折合价格</span>
            <span class="date">捐赠物资</span>
          </div>
        </div>
        <div class="warp-content">
          <vue3-seamless-scroll :list="listData1" class="scroll" :hover="true" :step="0.4" :limit-scroll-num="5">
            <div class="item" v-for="(item, index) in listData1" :key="index">
              <span :title="item.donateDate ? item.donateDate.substring(0, 10) : ''"> {{ item.donateDate ?
                item.donateDate.substring(0, 10) : "" }}</span>
              <span :title="item.donateUser">{{ item.donateUser }}</span>
              <span :title="item.convertedPrice">{{ item.convertedPrice }}</span>
              <span :title="item.material">{{ item.material }}</span>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
      <!-- 捐赠支出（物资） -->
      <div class="announceContent">
        <div class="announceTop">
          <div class="titleTop">
            捐赠支出（物资）
          </div>
          <p @click="goto('信息公开', 6)">更多 ></p>
        </div>
        <div class="warp-title">
          <div class="item">
            <span class="title">支出日期</span>
            <span class="date">支出物资</span>
            <span class="date">支出项目</span>
            <span class="date">接收方</span>
          </div>
        </div>
        <div class="warp-content">
          <vue3-seamless-scroll :list="listData3" class="scroll" :hover="true" :step="0.4" :limit-scroll-num="5">
            <div class="item" v-for="(item, index) in listData3" :key="index">
              <span :title="item.donateOutlayDate ? item.donateOutlayDate.substring(0, 10) : ''"> {{
                item.donateOutlayDate ? item.donateOutlayDate.substring(0, 10) : "" }}</span>
              <span :title="item.material">{{ item.material }}</span>
              <span :title="item.project">{{ item.project }}</span>
              <span :title="item.donateOutlayUser">{{ item.donateOutlayUser }}</span>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 淡入淡出 -->
    <div class="imagGif">
      <transition name="fades" v-for="(item, index) in imgurls" :key="index">
        <img :src="item.url" class="fadeIn" v-if="index == imgIndex" />
      </transition>
    </div>
    <!-- 志愿者 -->
    <div class="volunteer" v-loading="volunteerLoading">
      <div class="volunteers" v-for="(item, i) in bloobList" :key="i">
        <h2>{{ item.name }}</h2>
        <div style="width:85%;margin: 0 auto;">
          <el-carousel v-if="item.list.length != 0" height="240px" :autoplay="true" indicator-position="none"
            arrow="never" :interval="5000">
            <el-carousel-item v-for="(ite, index) in item.list" :key="index">
              <img @click="detail(ite)" style="width:100%;height:240px;" :src="ite.customInfoType2" alt="">
              <div class="volunteersItems">
                <p :title="ite.title" @click="detail(ite)" style=" cursor: pointer;">{{ ite.title }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 图片展示 -->
    <div class="ImageDisplay" v-loading="photoLoading">
      <div class="announceTop">
        <div class="titleTop">
          图片展示
        </div>
        <p @click="goto('图片展示', 0)">更多 ></p>
      </div>
      <div style="width:100%;position: relative; min-height: 180px">
        <swiper class="imgesAll" :grabCursor="true" :slidesPerView="6" :slidesPerGroup="6" :spaceBetween="20"
          :modules="modules" :navigation="true">
          <swiper-slide v-for="(card, cIndex) of PhotoList" :key="cIndex" class="imgesItem">
            <div class="item-container">
              <img @click="detail(card)" class="item-img" :src="card.customInfoType2" />
              <div class="volunteersItems">
                <p :title="card.title" @click="detail(card)" style=" cursor: pointer;">{{ card.title }}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 视频展示 -->
    <div class="ImageDisplay" v-loading="videoLoading">
      <div class="announceTop">
        <div class="titleTop">
          视频展示
        </div>
        <p @click="goto('视频展示', 1)">更多 ></p>
      </div>
      <div style="width:100%;position: relative; min-height: 180px">
        <swiper class="imgesAll" :grabCursor="true" :slidesPerView="6" :slidesPerGroup="6" :spaceBetween="20"
          :modules="modules" :navigation="true">
          <swiper-slide v-for="(item, i) of autoList" :key="i" class="videsItem">
            <div>
              <img v-if="item.customInfoType2.split('.')[1] == 'svg'" :src="item.customInfoType2" alt="">
              <video v-else controls="true">
                <source :src="item.customInfoType2">
              </video>
              <div class="videoItems">
                <p :title="item.title" @click="detail(item)" style=" cursor: pointer;">{{ item.title }}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>
<script setup name='HomeView'>
import { GetArticleList, GetDonateList, GetDonateLists } from '@/api/common'
import { ref, onMounted, watch, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation, Scrollbar, A11y, Autoplay } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';
const router = useRouter()
const modules = ref([Navigation, Scrollbar, A11y, Autoplay])
const imgurl = ref([
  {
    url: require('@/assets/love.png')
  },
  {
    url: require('@/assets/u179.png')
  },
])
const imgurls = ref([
  {
    url: require('@/assets/u271.png')
  },
  {
    url: require('@/assets/u272.png')
  },
])
const helpData = ref([])
const slideList = ref([])
const list = ref([])
const helpList = ref([])
const bloobList = ref([
  {
    name: '无偿献血志愿者',
    list: []
  },
  {
    name: '造血干细胞捐献志愿者',
    list: []
  },
  {
    name: '遗体和人体器官捐献志愿者',
    list: []
  },
  {
    name: '爱心捐赠人士',
    list: [],
  },
  {
    name: '优秀志愿者',
    list: [],
  },
  {
    name: '捐献企业',
    list: [],
  }
])
// 行业公告
const listTop = ref([
  {
    name: '铁岭动态',
    CategoryId: 9,
    tabId: '1',
    list: []
  },
  {
    name: '国内要闻',
    CategoryId: 10,
    tabId: 2,
    list: []
  },
  {
    name: '直通区县',
    CategoryId: 11,
    tabId: 3,
    list: []
  },
  {
    name: '公示公告',
    CategoryId: 18,
    list: [],
    tabId: 1,
  }
])
// 应急
const tabulationList = ref([
  {
    name: '应急救援',
    CategoryId: 26,
    tabId: '1',
    list: []
  },
  {
    name: '应急救护',
    CategoryId: 27,
    tabId: 2,
    list: []
  },
  {
    name: '人道救助',
    CategoryId: 28,
    tabId: 3,
    list: []
  },
  {
    name: '造血干细胞捐献',
    CategoryId: 29,
    list: [],
    tabId: 4,
  },
  {
    name: '遗体和人体器官捐献',
    CategoryId: 30,
    list: [],
    tabId: 5,
  },
  {
    name: '无偿献血',
    CategoryId: 31,
    list: [],
    tabId: 6,
  },
])
const autoList = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  sort: 'createTime',
  sortType: 'descending',
})
const volunteerLoading = ref(true)
const loading = ref(true)
const helpLoading = ref(true)
const tabulationLoading = ref(true)
const photoLoading = ref(true)
const videoLoading = ref(true)
const listData = ref([])
const listData2 = ref([])
const listData3 = ref([])
const listData1 = ref([])
const volunteerList = ref([])
const total = ref(0)
const imgIndex = ref(0)
const titleName = ref({})
const currentIndex = ref(0)
const PhotoList = ref([])
const timer = ref(null)
const play = () => {
  timer.value = setInterval(() => {
    currentIndex.value++;
    if (currentIndex.value >= total.value) {
      currentIndex.value = 0;
    }
  }, 5000);
}
const playGo = () => {
  setInterval(() => {
    imgIndex.value++;
    if (imgIndex.value > 1) {
      imgIndex.value = 0;
    }
  }, 5000);
}
const stop = () => {
  clearInterval(timer.value);
}
const go = () => {
  play()
}
const change = (index) => {
  currentIndex.value = index
}
// 跳转详情
const detail = (val) => {
  if (val.authorName == '外部链接') {
    const regex = /<a[^>]*\shref="([^"]+)"[^>]*>([^<]+)<\/a>/gi;
    const doc = regex.exec(val.content)
    if (doc) {
      window.open(doc[1], '_blank')
    } else {
      const href = router.resolve({ path: "/NULL" })
      window.open(href.href, '_blank')
    }
  } else {
    const routerData = router.resolve({ path: "/DetialInformation", query: { id: val.cid } })
    window.open(routerData.href, '_blank')
  }
}
// 跳转更多
const goto = (val, index) => {
  if (val == '铁岭动态' || val == '国内要闻' || val == '直通区县') {
    router.push({ path: "/NewsInformation", query: { tabId: index } })
  } else if (val == '业务动态') {
    router.push({ path: "/BusinessDynamics", query: { tabId: index } })
  } else if (val == '信息公开' || val == '公示公告') {
    router.push({ path: "/InformationDisclosure", query: { tabId: index } })
  } else if (val == '我要参与') {
    router.push({ path: "/IParticipate", query: { tabId: index } })
  } else if (val == '图片展示') {
    router.push({ path: "/ShowPhotos", query: { tabId: index } })
  } else if (val == '视频展示') {
    router.push({ path: "/ShowPhotos", query: { tabId: index } })
  } else if (val == '捐赠项目') {
    router.push({ path: "/ShowPhotos", query: { tabId: index } })
  }
}
const getList = () => {
  loading.value = true
  tabulationLoading.value = true
  // 获取置顶轮播图
  queryParams.value.isTop = 'yes'
  GetArticleList(queryParams.value).then((res) => {
    if (res.data.code == '200') {
      slideList.value = res.data.data.result
      if (res.data.data.totalNum > 5) {
        total.value = 5
      } else {
        total.value = res.data.data.totalNum
      }
      if (slideList.value.length != 0) {
        titleName.value = slideList.value[0]
      }
    }
  })
  // 轮播图旁 列表内容
  listTop.value.map((item) => {
    queryParams.value.isTop = ''
    queryParams.value.CategoryId = item.CategoryId
    GetArticleList(queryParams.value).then((res) => {
      if (res.data.code == '200') {
        item.list = res.data.data.result
        loading.value = false
      }
    })
  })
  // 应急列表
  tabulationList.value.map((item) => {
    queryParams.value.isTop = ''
    queryParams.value.CategoryId = item.CategoryId
    GetArticleList(queryParams.value).then((res) => {
      if (res.data.code == '200') {
        item.list = res.data.data.result
        tabulationLoading.value = false
      }
    })
  })
}
// 捐赠
const getHelp = () => {
  helpLoading.value = true
  const params = {
    pageNum: 1,
    pageSize: 8,
    sort: 'createTime',
    sortType: 'ascending',
    CategoryId: 38
  }
  // 捐赠项目
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      helpData.value = res.data.data.result
    }
  })
  params.sortType = 'descending'
  // 我要求助
  params.pageSize = 5
  params.CategoryId = 41
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      helpList.value = res.data.data.result
    }
  })
  // 红十字志愿服务与青少年工作
  params.CategoryId = 32
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      list.value = res.data.data.result
    }
  })
  // 红十字会会员/志愿者
  params.CategoryId = 43
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      let arr = res.data.data.result
      params.CategoryId = 42
      GetArticleList(params).then((res) => {
        if (res.data.code == '200') {
          let arr1 = res.data.data.result
          volunteerList.value = arr.concat(arr1)
          volunteerList.value.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
          volunteerList.value = volunteerList.value.slice(0, 5)
        }
      })
    }

  })
}
// 捐赠捐献
const getTableList = () => {
  const params = {
    pageNum: 1,
    pageSize: 20,
    sort: 'donateDate',
    sortType: 'descending',
    donateType: "amount"
  }
  GetDonateList(params).then((res) => {
    if (res.data.code == '200') {
      listData.value = res.data.data.result
    }
  })
  params.donateType = "material"
  GetDonateList(params).then((res) => {
    if (res.data.code == '200') {
      listData1.value = res.data.data.result
    }
  })
}
// 捐赠支出
const getDonateList = () => {
  const params = {
    pageNum: 1,
    pageSize: 20,
    donateType: "amount"
  }
  GetDonateLists(params).then((res) => {
    if (res.data.code == '200') {
      listData2.value = res.data.data.result
    }
  })
  params.donateType = "material"
  GetDonateLists(params).then((res) => {
    if (res.data.code == '200') {
      listData3.value = res.data.data.result
      helpLoading.value = false
    }
  })
}
const getvolunteerList = () => {
  const params = {
    pageNum: 1,
    pageSize: 8,
    sort: 'createTime',
    sortType: 'descending',
    CategoryId: 39,
  }
  bloobList.value.map((item) => {
    volunteerLoading.value = true
    params.customInfoType = item.name
    GetArticleList(params).then((res) => {
      if (res.data.code == '200') {
        item.list = res.data.data.result
        volunteerLoading.value = false
      }
    })
  })
}
const getPhotoVideo = () => {
  photoLoading.value = true
  videoLoading.value = true
  const params = {
    pageNum: 1,
    pageSize: 20,
    sort: 'createTime',
    sortType: 'descending',
    CategoryId: 15,
  }
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      PhotoList.value = res.data.data.result
      photoLoading.value = false
    }
  })
  params.CategoryId = 16
  GetArticleList(params).then((res) => {
    if (res.data.code == '200') {
      autoList.value = res.data.data.result
      videoLoading.value = false
    }
  })
}
// 用来监听轮播图title内容改变
watch(currentIndex, () => {
  titleName.value = slideList.value[currentIndex.value]
}, { deep: true })
onMounted(() => {
  go()
  playGo()
})
onBeforeMount(() => {
  getList()
  getHelp()
  getTableList()
  getDonateList()
  getvolunteerList()
  getPhotoVideo()
})
</script>

<style lang="scss" scoped>
.home {
  width: 85%;
  margin: auto;
}

.homeTop {
  display: flex;
  margin: 20px 0 10px 0;

  .swiper {
    width: 50%;
    height: 500px;
    position: relative;

    ul li {
      list-style: none;
      display: none;
    }

    a {
      text-decoration: none;
    }
  }
}

.bannerImg {
  overflow: hidden;
}

.bannerImg img {
  width: 100%;
  height: 500px;
  vertical-align: middle;
}

.bannerItems {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  height: 40px;
  line-height: 40px;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(0, 0, 0, 0.2980392156862745);

  p {
    margin: 0;
    color: #fff;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70%;
    text-align: left;

  }
}

.slideUl {
  margin: 0;
  padding: 0;
}

.bannerItems span {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-family: Microsoft YaHei;
  line-height: 20px;
  text-align: center;
  color: white;
  cursor: pointer;
  border: 1px solid #fff;
  margin: 0 3px;
  display: block;
}

.bannerItems span.active {
  background-color: red;
}

.announce {
  width: 50%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .announceContent {
    width: 48%;
    padding-bottom: 10px;

    ul {
      margin: 5px 15px 10px 30px;
      padding: 0;
      height: 190px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 16px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 80%;
          margin: 8px 0;
          cursor: pointer;
          border-bottom: 1px solid #fff;
        }

        span {
          width: 80px;
          text-align: right;
        }

        p:hover {
          color: red;
          border-color: red;
        }
      }
    }

    ul li p::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      margin-top: 0.5rem;
      margin-left: -1rem;
      width: 0.4rem;
      height: 0.4rem;
      background: #000;
    }

    p:hover::before {
      background: red;
    }
  }

  .announceTop {
    height: 40px;
    background-color: #f7ccd1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 14px;
      color: #d9001b;
      margin-right: 10px;
      cursor: pointer;
    }

    .titleTop {
      background-image: url(../assets/subtitleBack.png);
      background-repeat: no-repeat;
      width: 40%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      font-weight: 600;
      background-size: 100% 40px;
    }
  }
}

.imgGif {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}

.tabulation {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .announceContent {
    width: 32%;
    padding-bottom: 10px;

    ul {
      margin: 5px 15px 10px 30px;
      padding: 0;
      height: 190px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 16px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 80%;
          margin: 8px 0;
          cursor: pointer;
          border-bottom: 1px solid #fff;
        }

        span {
          width: 80px;
          text-align: right;
        }

        p:hover {
          color: red;
          border-color: red;
        }
      }
    }

    ul li p::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      margin-top: 0.5rem;
      margin-left: -1rem;
      width: 0.4rem;
      height: 0.4rem;
      background: #000;
    }

    p:hover::before {
      background: red;
    }
  }

  .announceTop {
    height: 40px;
    background-color: #f7ccd1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 14px;
      color: #d9001b;
      margin-right: 10px;
      cursor: pointer;
    }

    .titleTop {
      background-image: url(../assets/subtitleBack.png);
      background-repeat: no-repeat;
      width: 40%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      font-weight: 600;
      background-size: 100% 40px;
    }
  }
}

.imagGif {
  width: 100%;
  height: 200px;
  position: relative;
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 100%;
  }

  .fades-enter-active,
  .fades-leave-active {
    transition: opacity 2s ease;
    position: absolute;
    left: 0;

  }

  .fades-enter-to,
  .fades-leave-from {
    opacity: 1;
  }

  .fades-enter-from,
  .fades-leave-to {
    opacity: 0;
  }
}

.help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;

  .announceContent {
    width: 32%;
    padding-bottom: 10px;

    .account {
      width: 120px;
      height: 40px;
      background-color: #BBE800;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      box-shadow: 5px 5px 5px rgba(255, 69, 0, 0.34901960784313724)
    }

    .accountUse {
      padding-top: 40px;

      p {
        margin: 0;
        font-size: 16px;
        text-align: left;
      }
    }

    .online {
      width: 120px;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      background-color: #FF4500;
      box-shadow: 5px 5px 5px #ffcebc;
    }

    .helpProject {
      width: 98%;
      display: flex;
      flex-wrap: wrap;
      padding-top: 7px;
      padding-left: 10px;

      .helpProjects {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 50px;

        span {
          font-size: 16px;
          margin-left: 10px;
          cursor: pointer;
          border-bottom: 1px solid #fff;
          text-align: left;
        }

        span:hover {
          color: red;
          border-color: red;
        }
      }
    }

    ul {
      margin: 5px 15px 10px 30px;
      padding: 0;
      height: 190px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 16px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 80%;
          margin: 8px 0;
          cursor: pointer;
          border-bottom: 1px solid #fff;
        }

        span {
          width: 80px;
          text-align: right;
        }

        p:hover {
          color: red;
          border-color: red;
        }
      }
    }

    ul li p::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      margin-top: 0.5rem;
      margin-left: -1rem;
      width: 0.4rem;
      height: 0.4rem;
      background: #000;
    }

    p:hover::before {
      background: red;
    }
  }

  .announceTop {
    height: 40px;
    background-color: #f7ccd1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 14px;
      color: #d9001b;
      margin-right: 10px;
      cursor: pointer;
    }

    .titleTop {
      background-image: url(../assets/u887.png);
      background-repeat: no-repeat;
      width: 40%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      font-weight: 600;
      background-size: 100% 40px;
    }
  }

  .warp-title {
    .item {
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-around;
      text-align: center;

      span {
        color: #000;
        font-weight: 600;
        font-size: 16px;
        text-align: center;
        width: 25%;
      }
    }
  }

  .warp-content {
    width: 100%;
    height: 163px;
    overflow: hidden;

    .scroll {
      height: 163px;
      width: 100%;
      overflow: hidden;
    }

    .scroll .item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;

      span {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 24%;
      }
    }
  }
}

.volunteer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;

  .volunteers {
    width: 16%;
    background-image: url(../assets/u9090.jpg);
    background-repeat: no-repeat;
    height: 310px;
    background-size: 100% 310px;
    position: relative;

    .volunteersItems {
      position: absolute;
      bottom: 0;
      height: 40px;
      line-height: 40px;
      background-color: rgb(0, 0, 0, 0.2980392156862745);
      width: 100%;
      color: #fff;

      p {
        margin: 0;
        padding: 0;
        max-width: 100%;
        padding-left: 10px;
        font-size: 16px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    h2 {
      text-align: left;
      color: #fff;
      font-weight: normal;
      font-size: 20px;
      padding-left: 15px;
      margin: 0;
      height: 50px;
      padding-top: 10px;
    }
  }
}

.ImageDisplay {
  .announceTop {
    height: 40px;
    background-color: #f7ccd1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 14px;
      color: #d9001b;
      margin-right: 10px;
      cursor: pointer;
    }

    .titleTop {
      background-image: url(../assets/subtitleBack.png);
      background-repeat: no-repeat;
      width: 10%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      font-weight: 600;
      background-size: 100% 40px;
    }
  }

  .imgesAll {
    width: 90%;
    padding: 20px 0;
    position: initial;

    .volunteersItems {
      position: absolute;
      bottom: 0;
      height: 40px;
      line-height: 40px;
      background-color: rgb(0, 0, 0, 0.2980392156862745);
      width: 100%;
      color: #fff;

      p {
        margin: 0;
        padding: 0;
        max-width: 100%;
        padding-left: 10px;
        font-size: 16px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    }

    .videoItems {
      height: 40px;
      line-height: 40px;
      background-color: rgb(0, 0, 0, 0.2980392156862745);
      width: 100%;
      color: #fff;

      p {
        margin: 0;
        padding: 0;
        max-width: 100%;
        padding-left: 10px;
        font-size: 16px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .imgesItem {
      height: 180px;

      img {
        width: 100%;
        height: 180px;
        box-shadow: 5px 5px 5px 5px rgba(000, 000, 000, 0.1);
        vertical-align: middle;
      }

    }

    .videsItem {
      video {
        width: 100%;
        height: 180px;
        box-shadow: 5px 5px 5px 5px rgba(000, 000, 000, 0.1);
        vertical-align: middle;
      }

      img {
        width: 100%;
        height: 180px;
        box-shadow: 5px 5px 5px 5px rgba(000, 000, 000, 0.1);
        vertical-align: middle;
      }
    }

    :deep .swiper-button-next {
      background-image: url(../assets/next.jpg);
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
    }

    :deep .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
      content: '';
    }

    :deep .swiper-button-prev {
      background-image: url(../assets/prev.jpg);
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-size: 100%;
    }

    :deep .swiper-button-prev.swiper-button-disabled,
    :deep .swiper-button-next.swiper-button-disabled {
      opacity: unset;
    }


    :deep .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
      content: '';
    }

    :deep .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
      right: 0;
    }

    :deep .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
      left: 0;
    }
  }
}
</style>